bohui-vue 1.0.1

package/templates/vue-project/src/views/teachingLog/components/TeachingEffect.vue

@@ -0,0 +1,458 @@
+<template>
+    <div class="teaching-effect">
+        <div class="effect-header">
+            <img
+                class="effect-icon"
+                src="@/assets/images/Click-tap.png"
+                alt=""
+            />
+            <div class="effect-title">教学效果</div>
+        </div>
+        <div class="effect-stats">
+            <div
+                v-for="s in effectStats"
+                :key="s.label"
+                class="stat"
+            >
+                <div class="stat-label">{{ s.label }}</div>
+                <div class="stat-value">{{ s.value }}</div>
+            </div>
+        </div>
+        <div class="effect-trend">
+            <div class="trend-title">
+                <span class="bullet-bar"></span>
+                <span>学生专注度趋势图</span>
+            </div>
+            <div
+                ref="trendEl"
+                class="trend-chart"
+            ></div>
+        </div>
+        <div class="decline-section">
+            <div class="decline-title">
+                <span class="bullet-bar"></span>
+                <span>听课效果不佳的教学环节</span>
+            </div>
+            <div class="timeline">
+                <div
+                    v-for="p in declinePoints"
+                    :key="p.time"
+                    class="timeline-item"
+                >
+                    <div class="timeline-time">{{ p.time }}</div>
+                    <div class="timeline-dot"></div>
+                    <img
+                        :src="p.image"
+                        alt=""
+                        class="timeline-image"
+                        @mouseenter="showTooltip(p.description, $event)"
+                        @mousemove="moveTooltip($event)"
+                        @mouseleave="hideTooltip()"
+                    />
+                </div>
+            </div>
+        </div>
+        <div
+            v-if="showTooltipContent"
+            class="tooltip-popup"
+            :style="{ left: tooltipX + 'px', top: tooltipY + 'px' }"
+        >
+            <div class="tooltip-title">
+                <span class="bullet-bar"></span>
+                <span>教学内容总结</span>
+            </div>
+            <div class="tooltip-content">{{ tooltipDescription }}</div>
+        </div>
+        <div class="qr-code">
+            <div
+                class="title"
+                @click="showQRCodeHandler"
+            >
+                扫码获取教学日志
+            </div>
+            <img
+                v-show="isShowQRCode"
+                src="@/assets/images/erCode.png"
+                alt=""
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import {
+    studentListenFocusListAPI,
+    getAILessonAttendAPI,
+    getStudentListenOverviewAPI,
+} from "@/api/services/aicebd";
+import { useEffectTooltip } from "../composables/useEffectTooltip";
+import { useEffectTrendChart } from "../composables/useEffectTrendChart";
+
+const props = defineProps({
+    lessonCode: {
+        type: String,
+        default: "",
+    },
+});
+
+// 学生出勤信息数据
+const aiLessonAttendanceData = ref<aicebdDto.AILessonAttendance | null>(null);
+async function getAILessonAttendanceData() {
+    if (props.lessonCode) {
+        const resData = await getAILessonAttendAPI(props.lessonCode);
+        aiLessonAttendanceData.value = resData;
+    } else {
+        aiLessonAttendanceData.value = window.DataConfig?.teachingEffect?.attendanceData || {
+            attendanceStudentNum: 0,
+            attendanceStudentRate: 0,
+            frontRowSeats: 0,
+            frontStudentNum: 0,
+            frontStudentRate: 0,
+            lateNum: 0,
+            leaveEarlyNum: 0,
+            lessonCode: props.lessonCode,
+            shouldStudentNum: 0,
+            totalStudentSeats: 0,
+        };
+    }
+}
+
+// 学生整体专注度数据
+const studentListenOverviewData = ref<aicebdDto.StudentListenOverview | null>(null);
+async function getStudentListenOverviewData() {
+    if (props.lessonCode) {
+        const resData = await getStudentListenOverviewAPI(props.lessonCode);
+        studentListenOverviewData.value = resData;
+    } else {
+        studentListenOverviewData.value = window.DataConfig?.teachingEffect?.overviewData || {
+            attendanceRate: 0,
+            focusAvg: 0,
+            heighFocus: 0,
+            heighPerformanceTeachingTimeRangePercentage: 0,
+            lowFocus: 0,
+            lowPerformanceTeachingTimeRangePercentage: 0,
+        };
+    }
+}
+
+// 根据接口数据，计算教学效果统计数据
+const effectStats = computed(() => {
+    const attendanceRate = aiLessonAttendanceData.value?.attendanceStudentRate ?? 0;
+    const frontRate = aiLessonAttendanceData.value?.frontStudentRate ?? 0;
+    const focus = studentListenOverviewData.value?.focusAvg ?? 0;
+    return [
+        {
+            label: "学生出勤率",
+            value: `${(attendanceRate * 100).toFixed(2)}%`,
+        },
+        {
+            label: "前排就座率",
+            value: `${(frontRate * 100).toFixed(2)}%`,
+        },
+        { label: "平均专注度", value: `${(focus * 100).toFixed(2)}%` },
+    ];
+});
+
+// 学生专注度趋势数据
+let studentListenFocusListData = ref<TeachingLogVo.FocusTrendItem[] | null>(null);
+// 教学效果趋势图表
+const { initTrendChart } = useEffectTrendChart();
+const trendEl = ref<HTMLDivElement | null>(null);
+let disposer: { dispose: () => void } | null = null;
+
+async function getStudentListenFocusListData() {
+    if (props.lessonCode) {
+        const resData = await studentListenFocusListAPI(props.lessonCode);
+        const sorted = (resData || [])
+            .slice()
+            .sort(
+                (a: aicebdDto.StudentListenFocus, b: aicebdDto.StudentListenFocus) =>
+                    a.order - b.order
+            );
+        studentListenFocusListData.value = sorted.map((d: aicebdDto.StudentListenFocus) => ({
+            time: d.order * 60,
+            focus: d.focusAvg * 100,
+        }));
+    } else {
+        const fallback = (window.DataConfig?.teachingEffect?.focusTrendData ||
+            []) as aicebdDto.StudentListenFocus[];
+        const sorted = fallback
+            .slice()
+            .sort(
+                (a: aicebdDto.StudentListenFocus, b: aicebdDto.StudentListenFocus) =>
+                    a.order - b.order
+            );
+        studentListenFocusListData.value = sorted.map((d: aicebdDto.StudentListenFocus) => ({
+            time: d.order * 60,
+            focus: d.focusAvg * 100,
+        }));
+    }
+
+    if (trendEl.value) {
+        const trend = (studentListenFocusListData.value || []).map(
+            (d: TeachingLogVo.FocusTrendItem) => [d.time, d.focus]
+        ) as Array<[number, number]>;
+        disposer = initTrendChart(trendEl.value, trend);
+    }
+}
+
+onMounted(() => {
+    getAILessonAttendanceData();
+    getStudentListenOverviewData();
+    getStudentListenFocusListData();
+});
+onUnmounted(() => {
+    disposer?.dispose();
+});
+
+// 学生专注度下降点数据
+const focusDecrease = window.DataConfig?.teachingEffect?.focusDecrease || [];
+const declinePoints = computed(() =>
+    (focusDecrease || []).map((p: TeachingLogVo.FocusDecreaseItem) => ({
+        time: p.time,
+        image: p.image || "",
+        description: p.description || "",
+    }))
+);
+
+// 学生专注度下降点提示框
+const {
+    showTooltipContent,
+    tooltipDescription,
+    tooltipX,
+    tooltipY,
+    showTooltip,
+    moveTooltip,
+    hideTooltip,
+} = useEffectTooltip();
+
+// 二维码是否显示
+const isShowQRCode = ref(true);
+function showQRCodeHandler() {
+    isShowQRCode.value = !isShowQRCode.value;
+}
+</script>
+
+<style scoped lang="scss">
+.teaching-effect {
+    position: relative;
+    padding: 2rem;
+    background-color: #191b1d;
+    border-radius: 1.2rem;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+    .effect-header {
+        display: flex;
+        align-items: center;
+        gap: 0.8rem;
+        .effect-icon {
+            width: 3rem;
+            height: 3rem;
+        }
+        .effect-title {
+            color: #fff;
+            font-size: 2.8rem;
+            font-weight: 600;
+        }
+    }
+    .effect-stats {
+        margin-top: 3rem;
+        width: calc(100% - 20rem);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        .stat {
+            display: grid;
+            place-items: center;
+            row-gap: 1rem;
+            position: relative;
+        }
+        .stat + .stat::before {
+            content: "";
+            position: absolute;
+            left: -0.5rem;
+            top: 10%;
+            bottom: 10%;
+            width: 1px;
+            background: #424242;
+        }
+        .stat-label {
+            color: #fff;
+            font-size: 2rem;
+        }
+        .stat-value {
+            color: #2ba9ff;
+            font-size: 2.6rem;
+            font-weight: 700;
+        }
+    }
+
+    @media screen and (max-width: 640px) {
+        .effect-stats {
+            width: calc(100%);
+        }
+    }
+
+    .trend-chart {
+        margin-top: 2rem;
+        width: 100%;
+        height: 26vh;
+        min-height: 200px;
+        background: #1a1b1e;
+    }
+    .effect-trend {
+        margin-top: 3rem;
+        .trend-title {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            color: #fff;
+            font-size: 2.4rem;
+        }
+        .bullet-bar {
+            width: 4px;
+            height: 14px;
+            background: #2ba9ff;
+            border-radius: 2px;
+        }
+    }
+    .decline-section {
+        margin-top: 4rem;
+        .decline-title {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            color: #fff;
+            font-size: 2.4rem;
+        }
+        .bullet-bar {
+            width: 4px;
+            height: 14px;
+            background: #2ba9ff;
+            border-radius: 2px;
+        }
+        .timeline {
+            margin-top: 1rem;
+            display: flex;
+            flex-wrap: nowrap;
+            overflow-x: auto;
+            padding-bottom: 0.4rem;
+            align-items: flex-start;
+        }
+        .timeline-item {
+            position: relative;
+            display: grid;
+            justify-items: center;
+            gap: 0.6rem;
+            padding: 1rem;
+            background: #1a1b1e;
+        }
+        .timeline-item::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 5.2rem;
+            height: 1px;
+            background: rgba(43, 169, 255, 0.5);
+        }
+        .timeline-time {
+            color: #66b4ff;
+            font-size: 2rem;
+        }
+        .timeline-dot {
+            width: 1.2rem;
+            height: 1.2rem;
+            border-radius: 50%;
+            background: #2ba9ff;
+        }
+        .timeline-image {
+            width: 26.5vw;
+            min-width: 20rem;
+            max-width: 250px;
+
+            // height: 10rem;
+            object-fit: cover;
+            border-radius: 3px;
+            border: 1px solid #414141;
+            img {
+                border-radius: 3px;
+            }
+        }
+    }
+    .tooltip-popup {
+        position: absolute;
+        min-width: 30rem;
+        max-width: 36rem;
+        padding: 1.2rem 1.4rem;
+        background: #000;
+        color: #fff;
+        border-radius: 6px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+        z-index: 1000;
+        .tooltip-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 1.8rem;
+            margin-bottom: 0.6rem;
+        }
+        .bullet-bar {
+            width: 4px;
+            height: 14px;
+            background: #2ba9ff;
+            border-radius: 2px;
+        }
+        .tooltip-content {
+            font-size: 1.6rem;
+            line-height: 1.8;
+            color: #e9edf1;
+        }
+    }
+    .qr-code {
+        position: absolute;
+        top: 0rem;
+        right: 0rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 3rem;
+        background-color: #101012;
+        // border: 1px solid #27272c;
+        border-radius: 1rem;
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: -1rem;
+            width: 0;
+            height: 0;
+            border: 1rem solid transparent;
+            border-top-color: #101012;
+            border-right-color: #101012;
+        }
+        &::after {
+            content: "";
+            position: absolute;
+            bottom: -1rem;
+            right: 0;
+            width: 0;
+            height: 0;
+            border: 1rem solid transparent;
+            border-top-color: #101012;
+            border-right-color: #101012;
+        }
+        .title {
+            color: #fff;
+            font-size: 2rem;
+            text-align: center;
+            cursor: pointer;
+        }
+        img {
+            margin-top: 1rem;
+            height: 15rem;
+        }
+    }
+}
+</style>

package/templates/vue-project/src/views/teachingLog/components/TeachingHighlight.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="teaching-highlight">
+        <div class="highlight-header">
+            <img
+                class="icon-star"
+                src="@/assets/images/Effects.png"
+                alt=""
+            />
+            <div class="highlight-title">教学亮点</div>
+        </div>
+        <div class="highlight-times">
+            <div
+                v-for="(t, i) in timeRanges"
+                :key="i"
+                class="time-chip"
+                :class="{ active: i === activeIndex }"
+                @click="setActive(i)"
+            >
+                {{ t }}
+            </div>
+        </div>
+        <div class="highlight-body">
+            <div class="bullet">
+                <span class="bullet-bar"></span>
+                <span class="bullet-text">
+                    专注度从
+                    <span class="accent">{{ currentItem?.startFocus }}%</span>
+                    持续提升至
+                    <span class="accent">{{ currentItem?.endFocus }}%</span>
+                </span>
+            </div>
+            <p class="desc">
+                {{ currentItem?.trendReason }}
+            </p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, watch } from "vue";
+import { formatSeconds } from "@/utils/time";
+import { studentListenPerformanceAnalyzeAPI } from "@/api/services/aicebd";
+
+const props = defineProps({
+    lessonCode: {
+        type: String,
+        default: "",
+    },
+});
+
+// 教学亮点数据
+const upReasonAnalyzeData = ref<aicebdDto.StudentListenPerformanceAnalyzeItem[]>([]);
+async function getStudentListenPerformanceAnalyze() {
+    if (props.lessonCode) {
+        const resData = await studentListenPerformanceAnalyzeAPI(props.lessonCode);
+        upReasonAnalyzeData.value = resData?.upReasonAnalyze || [];
+    } else {
+        upReasonAnalyzeData.value =
+            window.DataConfig?.performanceAnalyzeData?.upReasonAnalyze || [];
+    }
+}
+
+// 教学亮点时间段列表
+const timeRanges = computed<string[]>(() => {
+    return upReasonAnalyzeData.value?.map((i) => {
+        return `${formatSeconds(i.startTime / 1000)} - ${formatSeconds(i.endTime / 1000)}`;
+    });
+});
+
+// 当前选中的教学亮点时间段索引
+const activeIndex = ref<number>(0);
+watch(
+    upReasonAnalyzeData,
+    () => {
+        if (activeIndex.value >= upReasonAnalyzeData.value?.length) {
+            activeIndex.value = 0;
+        }
+    },
+    { immediate: true }
+);
+
+// 当前选中的教学亮点时间段数据
+const currentItem = computed<aicebdDto.StudentListenPerformanceAnalyzeItem | null>(() => {
+    if (!upReasonAnalyzeData.value?.length) return null;
+    const _startFocus = upReasonAnalyzeData.value[activeIndex.value]?.startFocus ?? 0;
+    const _endFocus = upReasonAnalyzeData.value[activeIndex.value]?.endFocus ?? 0;
+    const _currentItem = {
+        ...upReasonAnalyzeData.value[activeIndex.value],
+        startFocus: Number((_startFocus * 100).toFixed(2)),
+        endFocus: Number((_endFocus * 100).toFixed(2)),
+    };
+    return _currentItem;
+});
+// 设置当前选中的教学亮点时间段索引
+const setActive = (index: number) => {
+    activeIndex.value = index;
+};
+
+onMounted(() => {
+    getStudentListenPerformanceAnalyze();
+});
+</script>
+
+<style scoped lang="scss">
+.teaching-highlight {
+    margin-top: 3rem;
+    padding: 2rem;
+    background-color: #191b1d;
+    border-radius: 1.2rem;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+.highlight-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .icon-star {
+        width: 3rem;
+        height: 3rem;
+    }
+    .highlight-title {
+        color: #fff;
+        font-size: 2.8rem;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+    }
+}
+.highlight-times {
+    margin-top: 2rem;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 1rem;
+    overflow-x: auto;
+    .time-chip {
+        white-space: nowrap;
+        text-wrap: nowrap;
+        border: 1px solid transparent;
+        background-color: #282828;
+        color: #bebebe;
+        padding: 0.6rem 1.2rem;
+        font-size: 2rem;
+        line-height: 1;
+        border-radius: 2rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        &.active {
+            color: #fff;
+            background: rgba(0, 0, 0, 0.2);
+            border-color: #3f7af2;
+        }
+    }
+}
+.highlight-body {
+    margin-top: 2rem;
+    display: grid;
+    gap: 10px;
+    .bullet {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .bullet-bar {
+        width: 4px;
+        height: 14px;
+        background: #2ba9ff;
+        border-radius: 2px;
+    }
+    .bullet-text {
+        color: #fff;
+        font-size: 2.4rem;
+    }
+    .accent {
+        color: #2ba9ff;
+    }
+    .desc {
+        margin-top: 0.8rem;
+        color: #fff;
+        font-size: 2rem;
+        line-height: 1.8;
+    }
+}
+</style>