+.main-wrap-plan {

+  width: 134rem;

+  height: 70rem;

+  background-color: #fff;

+  border-radius: 10px;

+  position: absolute;

+  right: 60px;

+  top: 179px;

+  z-index: 1;

+  background-image: url("../img/new_img/plan/background.png");

+}

+.mypage .book-green > .text {

+  background-color: #38a867;

+}

+

+.purple-scroll::-webkit-scrollbar-thumb {

+  border-radius: 5px;

+  background-color: #9628b7a2;

+}

+

+.green-scroll::-webkit-scrollbar-thumb {

+  border-radius: 5px;

+  background-color: #38a867ad;

+}

+.mypage .book-green {

+  border: #38a867 solid 6px;

+}

+

+                    <div v-if="$route.name === 'MyPlan'" class="main-wrap-plan">

+                        <router-view />

+                    </div>

+                    <div v-else class="main-wrap">

+

+    <div style="height: 100%;">

+        <div class="myplan mypage flex" style="height: 100%; padding: 50px;">

+            <div class="textbook book-purple"

+                style="background-color: white; width: 50%; height: 100%; text-align: center;">

+                <div class="text">

+                    <p class="title1" style="color: #fff;">스케줄</p>

+                </div>

+                <div class="purple-scroll" style="overflow: auto; height: 85%;">

+                    <div style="padding: 10px 20px;">

+                        <p style="text-align: right;cursor: pointer;text-decoration: underline;padding-bottom: 5px;"

+                            class="title2" @click="goToPage2('MyPlan2')">학습 일정 변경하기</p>

+                        <p class="title1" v-if="!schedules || schedules.length === 0">오늘 학습할 내용이 없습니다.</p>

+                        <div class="flex-column " style="gap: 20px" v-else v-for="(schedule, index) in schedules"

+                            :key="index">

+                            <div class="flex justify-between align-center" style="gap: 70px">

+                                <div class="wrap cs-pt planBox" :class="{ 'cs-pt-clicked': isClicked }"

+                                    style="width: 100%; background-color: #f1eaff;"

+                                    @click="goToPage('Dashboard', schedule.schdl_id)">

+                                    <div class="text-lf flex justify-between align-center" style="width: 100%;">

+                                        <p class="title2" s>grade 3</p><button type="button" class="popup-close-btn"

+                                            @click="deleteSchedule(schedule.schdl_id)" style="flex-basis: 25px">

+                                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

+                                        </button>

+                                    <div class="text-lf flex justify-between align-center">

+                                        <div style="flex-basis: 40rem">

+                                            <div class="flex align-center mb10" style="gap: 10px;">

+                                                <p class="title2">

+                                                    <em class="gray-bd"

+                                                        style="background-color: #9528b7; color: white; font-size: 18px;">{{

+                                                            schedule.schdl_unit }}교시</em>

+                                                </p>

+                                                <p class="title1">{{ schedule.schedule_time }}</p>

+                                            </div>

+                                            <div class="title-box mb10" style="display: flex;">

+                                                <span class="title" style="font-size: 28px;">{{ schedule.unit_nm

+                                                    }}</span>

+                                                <p class="title2" style="margin: auto 0;margin-left: 1em;">{{

+                                                    schedule.book_nm }}</p>

+                                            </div>

+                                        </div>

+                                        <!-- <button v-if="schedule.finish == 'T'" type="button" title="바로가기" class="yellow-btn"

+                                        @click="goToPage('Dashboard', schedule.schdl_id)">학습완료</button>

+                                    <button v-else type="button" title="바로가기" class="yellow-btn"

+                                        @click="goToPage('Dashboard', schedule.schdl_id)"

+                                        style="flex-basis: 18rem">바로가기</button> -->

+                                        <div style="flex-basis: 100px"><img src="../../../resources/img/img214_19s.png"

+                                                alt="" style="height: 100px; width: 100px" /></div>

+

+                            </div>

+                        </div>

+                    </div>

+

+                </div>

+            </div>

+            <!-- <div class="yellow-box mt30">

+                    <div class="title-box flex justify-between align-center">

+                        <div>

+                            <p class="title">오늘 공부를 계획해봅시다.</p>

+                            <p class="title1 mt20">스스로 학습 일정을 바꿔볼까요?</p>

+                        </div>

+                        <button type="button" title="바로가기" class="yellow-btn"

+                            @click="goToPage2('MyPlan2')">바로가기</button>

+                    </div>

+                </div> -->

+

+            <div style="width: 50%;margin-left: 3em;">

+                <div class="flex">

+                    <div style="display: flex;">

+                        <img src="../../../resources/img/new_img/plan/course_text.png" style="margin: auto 0;">

+                    </div>

+                    <div style="justify-content: right; width: 100%; display: flex;"

+                        v-for="(ai_learning, index) in aiLearningList" :key="index">

+                        <div style="margin-right: 2em;"

+                            @click="goToPage2('AIDashboard', aiLearningList[index].unit_id)">

+                            <img src="../../../resources/img/new_img/plan/ai_course_1.png">

+                        </div>

+                        <div style="margin-right: 2em;"

+                            @click="goToPage2('AIDashboard', aiLearningList[index].unit_id)">

+                            <img src="../../../resources/img/new_img/plan/ai_course_2.png">

+                        </div>

+                        <div @click="goToPage2('AIDashboard', aiLearningList[index].unit_id)">

+                            <img src="../../../resources/img/new_img/plan/ai_course_3.png">

+                        </div>

+                    </div>

+

+                </div>

+

+                <div class="flex" style="margin-top: 3em;">

+                    <div style="display: flex;">

+                        <img src="../../../resources/img/new_img/plan/menu_text.png" style="margin: auto 0;">

+                    </div>

+                    <div class="mpcontainer">

+                        <div class="mpbox" style="margin-right: 2em;">

+                            <img src="../../../resources/img/new_img/icon/correct_icon.png">

+                            <p>채점결과</p>

+                        </div>

+

+                        <div class="mpbox" style="margin-right: 2em;">

+                            <img src="../../../resources/img/new_img/icon/mypage_icon.png">

+                            <p>생활기록부</p>

+                        </div>

+

+                        <div class="mpbox" style="margin-right: 2em;">

+                            <img src="../../../resources/img/new_img/icon/qNa_icon.png">

+                            <p>내문제질문</p>

+                        </div>

+

+                        <div class="mpbox">

+                            <img src="../../../resources/img/new_img/icon/photobook_icon.png">

+                            <p>포토북</p>

+                        </div>

+                    </div>

+                </div>

+                <!-- <div class="wrap mt30">

+                    <p class="title1 mb20">AI 맞춤형 학습 코스는 어떨까요?</p>

+                    <div class="imgGroup flex justify-between">

+                        <div class="text-lf aiClick" v-for="(ai_learning, index) in aiLearningList" :key="index"

+                            @click="goToPage2('AIDashboard', aiLearningList[index].unit_id)">

+                            <img src="../../../resources/img/img215_22s.png" alt="" />

+                            <p class="title2 mt10">추천 학습 단원</p>

+                        </div>

+                    </div>

+                </div> -->

+

+

+

+                <div class="mypage" style="display:flex;height: 50%;gap: 10px;margin-top: 4em;">

+                    <div class="textbook book-green"

+                        style="background-color: white; width: 50%; height: 100%; text-align: center;">

+                        <div class="text">

+                            <p class="title1" style="color: #fff;">오늘의 뉴스</p>

+                        </div>

+                        <div class="green-scroll" style="overflow: auto; height: 75%;">

+                            <div style=" padding: 10px;">

+                                <div v-for="(news, index) in schedules" :key="index">

+                                    <div style="display: flex;">

+                                        <div>

+                                            <img src="../../../resources/img/img16_s.png" alt="" />

+                                        </div>

+                                        <p style="margin-left: 5px; font-size: 18px;">{{ name }}님이 {{ unit }}을 다 끝냈습니다.

+                                        </p>

+                                    </div>

+                                    <hr style="margin: 10px 0;">

+                                </div>

+                            </div>

+                        </div>

+                    </div>

+

+                    <div class="textbook book-blue"

+                        style="background-color: white; width: 50%; height: 100%; text-align: center;">

+                        <div class="text ">

+                            <p class="title1" style="color: #fff;">학습 현황</p>

+                        </div>

+                        <div style="overflow: hidden; height: 75%;">

+                            <div class="flex justify-center">

+                                <Dounutchart />

+import Dounutchart from './chDounutchart.vue';

+

+            news: [],

+        fetchNews() {

+

+        },

+            this.$router.push({

+                name: page, query: {

+                    unit_id: unit_id,

+                },

+        Dounutchart: Dounutchart,

+    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.096) 0px 6px 6px; */

+

+.mypgBack {

+    background-image: url("../../../resources/img/new_img/plan/background.png");

+}

+

+.mpcontainer {

+    display: flex;

+    justify-content: right;

+    width: 100%;

+}

+

+.mpbox {

+    background-color: white;

+    border-radius: 20px;

+    text-align: center;

+    aspect-ratio: 1 / 1;

+    width: 100px;

+    display: grid;

+    align-items: center;

+}

+

+.mpbox img {

+    width: 4.5em;

+    margin: 10px auto 0 auto;

+}

+

+.mpbox p {

+    margin-top: 0.5em;

+    font-size: 16px;

+    font-family: 'ONEMobilePOPOTF';

+}

+<template>

+    <div ref="Dounutchart" style="position: relative;left: 29px;top: -5px;width: 500px;height: 300px;"></div>

+</template>

+

+<script>

+import * as am5 from "@amcharts/amcharts5";

+import * as am5percent from "@amcharts/amcharts5/percent";

+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

+import axios from "axios";

+

+export default {

+    name: "Dounutchart",

+

+    data() {

+        return {

+            chartData: {},

+            currentDate: "2024-08-14",

+            currentStdId: "1",

+            root: null,

+            chart: null

+        };

+    },

+

+    mounted() {

+        this.getStdProgressData();

+    },

+

+    methods: {

+

+        // 현재 날짜의 학생 학습률 데이터 가져오기

+        getStdProgressData() {

+            const vm = this;

+            axios.post('/dashboard/stdProgressData.json', {

+                std_id: vm.currentStdId,

+                current_date: vm.currentDate

+            })

+                .then(response => {

+                    vm.chartData = response.data;

+                    vm.createChart();

+                })

+                .catch(error => {

+                    console.error('오늘의 학생 학습 현황 데이터를 가져오는 중 오류 발생:', error);

+                })

+        },

+

+        createChart() {

+            // 차트 중복 생성 방지

+            if (this.root) {

+                this.root.dispose();

+            }

+

+            // Initialize root

+            const root = am5.Root.new(this.$refs.Dounutchart);

+

+            // Apply themes

+            root.setThemes([

+                am5themes_Animated.new(root)

+            ]);

+

+            // Create chart

+            const chart = root.container.children.push(am5percent.PieChart.new(root, {

+                layout: root.verticalLayout,

+                radius: am5.percent(80),

+                innerRadius: am5.percent(40)  // Adjusted innerRadius for a donut chart

+            }));

+

+            if (chart.logo) {

+                chart.logo.disabled = true;

+            };

+

+            // Create series

+            const series = chart.series.push(am5percent.PieSeries.new(root, {

+                valueField: "value",

+                categoryField: "category",

+                alignLabels: false

+            }));

+

+            // 색깔 설정

+            series.slices.template.setAll({

+                fill: am5.color(0x008000), // green for completed units

+                strokeWidth: 0,

+                strokeOpacity: 0

+            });

+

+            // 카테고리 별 색깔 설정

+            series.slices.template.adapters.add("fill", (fill, target) => {

+                if (target.dataItem.get("category") === "완료한 단원") {

+                    return am5.color(0xafe589); // 초록

+                } else if (target.dataItem.get("category") === "남은 단원") {

+                    return am5.color(0xf7cece); // 빨강

+                }

+                return fill;

+            });

+

+            series.labels.template.setAll({

+                textType: "circular",

+                centerX: am5.p50,

+                centerY: am5.p50,

+                fontSize: 14

+            });

+

+            // Set data

+            series.data.setAll([

+                { value: this.chartData.clearUnitNum, category: "완료한 단원" },

+                { value: this.chartData.totalScheduleUnitNum - this.chartData.clearUnitNum, category: "남은 단원" },

+            ]);

+

+            // Create legend

+            // const legend = chart.children.push(am5.Legend.new(root, {

+            //     centerX: am5.p50,

+            //     x: am5.p50,

+            //     marginTop: -100,

+            // }));

+

+            legend.data.setAll(series.dataItems);

+

+            // Play initial series animation

+            series.appear(1000, 100);

+

+        }

+    }

+

+};

+</script>

+

+<style scoped>

+/* Add necessary styles here */

+</style>(파일 끝에 줄바꿈 문자 없음)

+        std_id: vm.currentStdId,

+        current_date: vm.currentDate

+        .then(response => {

+          vm.chartData = response.data;

+          vm.createChart();

+        })

+        .catch(error => {

+        })